Page {
  padding-bottom: 400rpx;
}

.top-nav {
  position: fixed;
  top: 85rpx;
  left: 20rpx;
  color: #ffffff;
  z-index: 8;
}

.bottom-nav {
  z-index: 8;
  background-color: #ffffff;
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #cfcdcd;
  padding-bottom: 50rpx;
  padding-top: 20rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  display: flex;

  .icon-list {
    margin-right: 10rpx;
    display: flex;

    .icon {
      margin: 15rpx;

      .top {}

      .bottom {
        opacity: .7;
      }
    }
  }

  .button-list {
    display: flex;

    .button {
      margin: 10rpx;
    }
  }

}

swiper {
  height: 250px;

  swiper-item {

    image {
      width: 100%;
      height: 250px;
    }
  }
}

.desc {
  padding: 20rpx;

  .title {
    font-weight: 800;
    line-height: 50rpx;
    font-size: 35rpx;

  }

  .price {
    display: flex;

    .left {
      color: red;
      font-weight: 800;
      font-size: 50rpx;
    }

    .center {
      margin-top: 10rpx;
      color: red;
      font-weight: 800;
      font-size: 40rpx;
    }

    .right {
      margin-top: 10rpx;
      margin-left: 10rpx;
      font-size: 40rpx;
    }
  }

  .type-list {
    display: flex;
    background-color: #f8fafb;
    padding: 20rpx;

    .type-item {
      margin: 30rpx;

      .top {
        text-align: center;
        font-size: 20rpx;
        margin-bottom: 10rpx;
        opacity: .6;
      }

      .bottom {
        text-align: center;
        font-size: 25rpx;
        font-weight: 800;
      }
    }
  }

  .info {
    .info-item {
      display: flex;
      margin: 20rpx;
      width: 100%;

      .left {
        width: 20%;
        opacity: .7;
        margin-right: 30rpx;
      }

      .right {
        width: 70%;
        opacity: .9;

        .to {
          display: flex;
          color: red;

          .icon {
            margin-top: 5rpx;
          }
        }
      }
    }
  }
}

.introduce {
  padding: 30rpx;

  .title-big {
    font-weight: 800;
    font-size: 50rpx;
    margin-bottom: 30rpx;
  }

  .introduce-item {
    .title {
      font-size: 35rpx;
      font-weight: 800;
      margin-bottom: 20rpx;
      margin-top: 20rpx;
    }

    .info {
      opacity: 0.8;
      line-height: 50rpx;
    }
  }
}

.broker {
  padding: 20rpx;

  .title {
    font-size: 50rpx;
    font-weight: 800;
    margin-bottom: 60rpx;
  }

  .broker-item {
    display: flex;

    .left {
      image {
        border-radius: 15px;
        width: 150rpx;
      }
    }

    .center {
      margin-left: 20rpx;
      margin-right: 20rpx;
      width: 350rpx;

      .name {
        font-size: 40rpx;
        font-weight: 800;
      }

      .item {
        margin: 2rpx;
        font-size: 25rpx;

        p {
          color: red;
        }
      }
    }

    .right {
      display: flex;
      margin-top: 60rpx;

      .icon {
        margin: 20rpx;
      }
    }
  }
}

.appointment-container {
  padding: 30rpx;

  .close {
    float: right;
  }

  .title {
    font-size: 45rpx;
    font-weight: 800;
  }

  .day-list {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }

  .button {
    width: 100%;
  }

}

.appointmentOk-container {
  padding: 30rpx;

  .close {
    float: right;
  }

  .icon {
    margin-top: 80rpx;
    text-align: center;

    .top {}

    .bottom {
      margin-top: 40rpx;
      font-weight: 800;
      font-size: 45rpx;
    }
  }

  .info {
    margin-top: 50rpx;
    margin-bottom: 50rpx;
    padding: 60rpx;
    background-color: #f1f1f1;

    .title {
      font-size: 40rpx;
      font-weight: 800;
    }

    .text {
      margin-top: 20rpx;
    }
  }

  .button {
    width: 100%;
  }


}